<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link href="../../../css/mui.css" rel="stylesheet" />
		<link href="../../../css/common.css" rel="stylesheet" />
		<link href="../../../css/iconfont.css" rel="stylesheet" />
		<link href="../../../css/preview.css" rel="stylesheet" />

		<style>
			.mui-table-view{
				margin-top: 0px !important;
			}
			.mui-control-content {
				background-color: white;
				min-height: 760px;
			}
			.mui-scroll-wrapper{
				/* margin-top: 4px; */
			}
			.mui-table-view-cell {
				border-bottom: 1px solid rgba(200,200,200,0.2);
				font-size: 15px;
				width: 100%;
				height: 60px;
				line-height: 60px;
				padding: 0 15px;
			}
			.mui-table-view-cell label{
				float: left;
				width: 25%;
			}
			.mui-table-view-cell input{
				height: 60px;
				float: left;
				font-size: 15px; 
				width: 75%; 
				border: none;
			}
			.btn-real-name,.btn-face-recognition{
				color: white; 
				background-color: #007AFF;
				width: 95%;
				height: 50px;
				margin: 10px;
			}
			.IDtips{
				margin: 10px;
				font-size: 14px;
				text-align: center;
			}
			.IDtips p{
				font-size: 12px;
			}
			.item2ul,.item3ul{
				margin: 0 15px;
				display: -webkit-flex;
				display: flex;
				padding: 0 40px;
				justify-content: space-between;
			}
			.item2ul li{
				position: relative;
			}
			.item2ul img{
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
			.item2ul li{
				width: 100px;
				height: 100px;
				background-color: white;
				border: 1px solid rgba(0,0,0,.1);
			}
			.pointTo{
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
			.pointTo span{
				font-size: 30px;
				padding-top: 8px;
			}
			.item3ul{
				text-align: center;
				line-height: 100px;
			}
			.item3ul li{
				width: 100px;
				height: 100px;
				position: relative;
			}
			.item3ul li img{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 0;
			}
			.item3ul li .mask{
				width: 100px;
				height: 100px;
				position: absolute;
				background-color: rgba(0,0,0,.3);
			}
			.item3ul li span{
				width: 50px;
				height: 50px;
				position: absolute;
				color: white;
				font-size: 30px;
				left: 50%;
				margin-left: -25px;
				margin-top: -15px;
				top: 50%;
			}
			.item4ul li{
				list-style: square inside url(../../../imgs/eg_arrow.gif);
				margin:5px 15px;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left touch-action"></a>
			<h1 class="mui-title">实名认证</h1>
		</header>

		<div class="mui-content">
			<div class="mui-slider touch-action">
				<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#validate-old-password">
						身份证实名认证
					</a>
					<a class="mui-control-item" href="#facelike" id="faceclick">
						人脸识别
					</a>
				</div>

				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>

				<div class="mui-slider-group">
					<div id="validate-old-password" class="mui-slider-item mui-control-content mui-active">
						<div class="mui-scroll-wrapper validate-page1">
							<div class="mui-scroll">
								<form id="myForm" name="myForm" enctype = "multipart/form-data">
									<ul class="mui-table-view item1ul">
										<li class="mui-table-view-cell" >
											<label>真实姓名</label>
											<input type="text" name="real_name" placeholder="请输入您的真实姓名" id="real-name">
										</li>
										<li class="mui-table-view-cell" style="border-bottom: 10px solid rgba(200,200,200,0.2);">
											<label>身份证号</label>
											<input type="text" name="idcard_no" placeholder="请输入您的二代身份证号码" id="idcard-no">
										</li>
									</ul>
									<div class="IDtips">
										<span>请拍摄如下照片用于认证，可点击放大查看示例</span>
										<p>(上传照片占用较大流量，建议使用WIFI,单张照片不超过2M)</p>
									</div>
									<!-- //图片示例 -->
									<ul class="mui-table-view item2ul mui-content-padded">
										<li class="mui-table-view2-cell" >
											<img src="../../../imgs/IDface.png" data-preview-src="" data-preview-group="1" />
										</li>
										<li class="mui-table-view2-cell" >
											<img src="../../../imgs/IDback.png" data-preview-src="" data-preview-group="1">
										</li>
									</ul>
									
									<!-- 指向图片 -->
									<div class="pointTo">
										<span class="mui-icon iconfont icon-jiantou_decrease"></span>
									</div>
									<!-- 可上传图片 -->
									<ul class="mui-table-view item3ul" id="files">
										<li class="mui-table-view2-cell" onclick="appendByGallery(0)">
											<!-- <img src="../../../imgs/credit/gongshang.png" > -->
											<div class="mask"></div>
											<span class="mui-icon iconfont icon-jiahao"></span>
										</li>
										<li class="mui-table-view2-cell" onclick="appendByGallery(1)" >
											<!-- <img src="../../../imgs/credit/guangfa.png" > -->
											<div class="mask"></div>
											<span class="mui-icon iconfont icon-jiahao"></span>
										</li>
									</ul>
								<ul class="mui-table-view item4ul">
									<li class="mui-table-view2-cell" >
										<span>请保证您的年龄符合18-80周岁</span>
									</li>
									<li class="mui-table-view2-cell" >
										<span>必须上传身份证、银行卡的正反面照片</span>
									</li>
									<li class="mui-table-view2-cell" >
										<span>未达到示例标准、照片不清晰、经过剪辑处理等非正常拍摄都不予通过</span>
									</li>
								</ul>
								<button type="button" class="mui-btn mui-btn-outlined btn-real-name" onclick="upload()">立即实名</button>
								</form>
								<div class="fail-tip" style="color: red;text-align: center;">
									
								</div>
							</div>
						</div>
					</div>
					<div id="facelike" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper validate-page2">
							<!-- <button type="button" class="mui-btn mui-btn-outlined btn-face-recognition">人脸识别(人脸识别待接入)</button> -->
						</div>
					</div>
				</div>

			</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
		<script src="../../../js/immersed.js"></script>
		<script src="../../../js/mui.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/md5.min.js"></script>
		<script src="../../../js/mui.zoom.js"></script>
		<script src="../../../js/mui.previewimage.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.previewImage();
			mui.plusReady(function() {
				//人脸识别
				document.getElementById("faceclick").addEventListener('tap', function() {
					mui.alert('功能建设中，敬请期待...','人脸识别');
				});
			});
				//提交实名认证信息
				var files=[0,1];
				function upload() {
					var real_name = document.getElementById("real-name").value;
					var idcard_no = document.getElementById("idcard-no").value;
					var token = localStorage.logintoken;
					
					var realimg = document.getElementById("userfile");
						//验证数据
						if(!real_name || real_name=="")
						{
							mui.toast("请填写真实姓名！");
							return false;
						}
						if(!idcard_no || idcard_no=="")
						{
							mui.toast("请填写身份证号！");
							return false;
						}
						if(files[0] == 0 || files[1] == 1){
							mui.toast("请添加二张图片！");
							return false;
						}
						console.log("开始上传：");
						var wt=plus.nativeUI.showWaiting();
						var task = plus.uploader.createUpload(address('/api/User/realnameAuth'),
						{method:"POST",blocksize:204800,priority:100},function(t,status){
							// 上传完成
							let res = t.responseText;
							// console.log(typeof res == "string");
							console.log(res);
							if(typeof res == "string"){
								res = JSON.parse(res);
							}
							//2为认证成功,9为认证失败
							console.log("上传状态："+ res.code + (res.code == 1)?"认证成功":"认证失败");
							if ( res.code == 1) {
								wt.close();
								mui.toast("实名认证成功");
								console.log("上传成功："+res.code);
								// 用户实名认证后更新本地保存的用户信息
								let url = address("/api/User/user");
								let curdata = {};
								curdata['token'] = token;
								curdata['sign'] = sign(curdata,localStorage.signkey);
								mui.post(url, curdata,
								function(data) {
									console.log("认证成功更新本地用户信息");
									localStorage.userinfo=JSON.stringify(data.data);
								}, 'json');
								// 返回账户安全页面
								var targetview = plus.webview.getWebviewById('me-account-security');
								targetview.reload();
								mui.back();
								//跳转到等待审核页面
// 								mui.openWindow({
// 									url:'real_name_wait.html' ,
// 									id: 'real-name-wait',
// 									waiting:{
// 										autoShow:false,
// 									}
// 								});
							} else {
								// mui.toast( "实名失败");
								wt.close();
								document.getElementsByClassName('fail-tip')[0].innerText = '实名认证失败，请重新实名！';
								console.log("上传失败："+status);
								// 清除之前填写选择的内容
// 								document.getElementById("real-name").value = '';
// 								document.getElementById("idcard-no").value = '';
// 								var paras = document.getElementsByClassName('seledimg');
// 								//删除从下标0开始的两个元素并替换为0,1
// 								files.splice(0,2,0,1);
// 								for(let key in files){
// 									console.log("上传失败后重置files"+files[key]);
// 								}
// 								for(let i = 0;i<paras.length;i++){
// 									 //删除元素 元素.parentNode.removeChild(元素);
// 									console.log(paras[i]);
// 									paras[i].parentNode.removeChild( paras[i]);
// 								}
							}
							mui.toast(res.msg);
						});
						task.addData( "real_name", real_name );
						task.addData( "idcard_no", idcard_no );
						task.addData( "token", token );
						var curdata = {
							'real_name': real_name,
							'idcard_no': idcard_no,
							'token': token
						}
						var realsign = sign(curdata,localStorage.signkey);
						task.addData( "sign", realsign);
						console.log(files.length);
						for(var key in files){
							console.log(files[key].name);
							console.log(files[key].path);
						}
						//添加图片上传地址
						for(var i=0;i<files.length;i++){
							var f=files[i];
							task.addFile(f.path,{key:f.name});
						}
						task.start();
			}
			// 拍照添加文件
			function appendByCamera(imgind){
				plus.camera.getCamera().captureImage(function(p){
					appendFile(p,imgind);
				});	
			}
			// 从相册添加文件
			function appendByGallery(imgind){
				plus.gallery.pick(function(p){
					appendFile(p,imgind);
				});
			}
			// 添加文件
			function appendFile(p,imgind){
				var _img_=document.createElement('img');
				_img_.src=p;
				_img_.style.width='100px';
				_img_.style.height='100px';
				_img_.style.position='absolute';
				_img_.style.zIndex='200';
				_img_.classList.add("seledimg");
				//根据用户选择的下标值替换对应下标的files内容
				files.splice(imgind,1,{name:"image["+ imgind +"]",path:p});
				document.getElementById('files').children[imgind].appendChild(_img_);
				mui.toast('保存成功'+p);
			}
			function saveImage(){
				mui.toast('暂不支持保存');
			}
		</script>
</html>
